<template>
	<div class="content">
		<div class="banse">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>送测产品信息</span>
					<el-button style="float: right;margin-left: 5px;" type="primary" plain @click="go">返 回</el-button>
					<span v-if="power.includes('quotation_update')">

						<el-button style="float: right;" type="success" plain @click="editBtn" v-if="btnShow == 1">修 改</el-button>
						<el-button style="float: right;" type="success" plain @click="submit('form')" v-if="btnShow == 2">提 交</el-button>
					</span>
					<el-popconfirm
						title="确定生成报价单吗？"
						@confirm="orderPdf"
					>
						<el-button slot="reference" style="float: right;margin-right: 5px;" type="warning" v-if="power.includes('quotation_gene_pdf')" plain>生成报价单</el-button>
					</el-popconfirm>
				</div>
				<div>
					<el-form ref="form" :rules="rules" :model="form" label-width="100px">
						<el-row :gutter="12">
							<el-col :span="12">
								<el-form-item label="产品名称:" prop="product_name">
									<el-input v-model="form.product_name" clearable :disabled="btnShow == 1" placeholder="请输入产品名称"></el-input>
								</el-form-item>
								<el-form-item label="Model:" prop="model">
									<el-input v-model="form.model" clearable :disabled="btnShow == 1" placeholder="请输入Model"></el-input>
								</el-form-item>
								<el-form-item label="签署方式:">
									<el-radio-group v-model="form.sign_type" @change="signChange" :disabled="btnShow == 1">
										<el-radio label="alone">单独</el-radio>
										<el-radio label="before">根据</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="提测类型:">
									<el-select v-model="form.test_type" style="width: 100%;" :disabled="btnShow == 1" clearable placeholder="请选择提测类型">
										<el-option label="新品" value="新品"></el-option>
										<el-option label="迭代" value="迭代"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="提测服务器:">
									<el-select v-model="form.servers" style="width: 100%;" multiple :disabled="btnShow == 1" clearable placeholder="请选择提测服务器">
										<el-option
											v-for="(item,index) in serverOptions"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="签署日期:">
									<el-date-picker
										:disabled="btnShow == 1 || dataShow"
										v-model="form.sign_date"
										type="date"
										style="width: 100%;"
										placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>


					</el-form>
				</div>
			</el-card>
		</div>
		<div class="msg">
			<div class="item">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>客户信息</span>
					</div>
					<div >
						<el-form ref="customer" :rules="customerRules" :model="customer" label-width="100px">
							<el-form-item label="客户名称:" prop="customer_name">
								<el-select v-model="customer.customer_name" clearable filterable
										   allow-create
										   default-first-option
										   :disabled="btnShow == 1"
										   style="width: 100%;"
										   @change="customerChange"
										   placeholder="请选择客户">
									<el-option
										v-for="(item,index) in customer_list"
										:key="index"
										:label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="联系人:" prop="user_name">
								<el-input v-model="customer.user_name" clearable :disabled="btnShow == 1" placeholder="请输入联系人"></el-input>
							</el-form-item>
							<el-form-item label="电话:" prop="mobile">
								<el-input v-model="customer.mobile" clearable :disabled="btnShow == 1" placeholder="请输入电话"></el-input>
							</el-form-item>
							<el-form-item label="E-mail:" prop="email">
								<el-input v-model="customer.email" clearable :disabled="btnShow == 1" placeholder="请输入E-mail"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</el-card>
			</div>
			<div class="item">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>实验室信息</span>
					</div>
					<div>
						<el-form ref="laboratory" :rules="laboratoryRules" :model="laboratory" label-width="100px">
							<el-form-item label="地址:" prop="addr">
								<el-input v-model="laboratory.addr" clearable :disabled="btnShow == 1" placeholder="请输入地址"></el-input>
							</el-form-item>
							<el-form-item label="报价人:" prop="name">
								<el-input v-model="laboratory.name" clearable :disabled="btnShow == 1" placeholder="请输入报价人"></el-input>
							</el-form-item>
							<el-form-item label="电话:" prop="mobile">
								<el-input v-model="laboratory.mobile" clearable :disabled="btnShow == 1" placeholder="请输入电话"></el-input>
							</el-form-item>
							<el-form-item label="E-mail:" prop="email">
								<el-input v-model="laboratory.email" clearable :disabled="btnShow == 1" placeholder="请输入E-mail"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</el-card>
			</div>
		</div>
		<div class="serveList" style="">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>服务清单</span>
					<el-button v-if="power.includes('quotation_update')" style="float: right;margin-left: 5px;" type="primary" plain @click="addServer">添 加</el-button>
				</div>
				<div class="serveTable">
					<el-table
						:data="bcglXiangXiList"
						:border="true"
						ref="tb">
						<el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
						<el-table-column label="产品名称" property="product_name" align="center" width="200"></el-table-column>
						<el-table-column label="产品型号" property="model" align="center"  width="200"></el-table-column>
						<el-table-column label="服务项目" property="service_name" align="center" width="200"></el-table-column>
						<el-table-column label="服务内容" property="service_content" align="center" width="200"></el-table-column>
						<el-table-column label="时长" property="hour_count" align="center"  width="200">
							<template slot-scope="scope">
								<span>{{getContent(scope.row.hour_count)}}</span>
							</template>
						</el-table-column>
						<el-table-column label="每小时单价（元）" property="unit_price" align="center"  width="200">
							<template slot-scope="scope">
								<span>{{getContent(scope.row.unit_price)}}</span>
							</template>
						</el-table-column>
						<el-table-column label="小计（元）" property="price" align="center" width="200"></el-table-column>
						<el-table-column label="备注" property="remark" align="center" width="200"></el-table-column>
						<el-table-column align="center" label="操作" fixed="right" width="230">
							<template slot-scope="scope">
								<span><a @click="see(scope.row)">查 看</a></span>
								<span><a > | </a></span>
								<span><a @click="edit(scope.row)" :disabled="!power.includes('quotation_update')">编 辑</a></span>
								<span><a > | </a></span>
								<span><a @click="copy(scope.row)" :disabled="!power.includes('quotation_update')">复制本行</a></span>
								<span><a > | </a></span>
								<span>
									<template>
										<el-popconfirm title="确认删除吗？" @confirm="del(scope.row)">
											<span slot="reference" class="del">删除</span>
										</el-popconfirm>
									</template>
								</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-card>
		</div>
		<div class="serveList" style="">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>报价单PDF清单</span>
				</div>
				<div class="serveTable">
					<el-table
						:data="Pdflist"
						:border="true"
						ref="tb">
						<el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
						<el-table-column label="ID" property="_id" align="center" width="200"></el-table-column>
						<el-table-column label="MD5" property="md5" align="center" width=""></el-table-column>
						<el-table-column label="价格(元)" property="price" align="center" width="200"></el-table-column>
						<el-table-column label="大小" property="size_show" align="center" width="200"></el-table-column>
						<el-table-column label="下载" property="full_path" align="center"  width="200">
							<template slot-scope="scope">
								<a :href="scope.row.full_path">点击下载</a>
							</template>
						</el-table-column>
						<el-table-column align="center" property="own" label="创建信息" width="200">
							<template slot-scope="scope">
						<span>{{getLeader(scope.row.creator_show)}}<br>
							<span style="font-size: 10px;">{{getTime(scope.row.create_time)}}</span>
						</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-card>
		</div>
		<div class="topBottom">
			<div class="item">
				合计金额: {{totalPrice}} 元
			</div>
		</div>
		<addService ref="addService"></addService>
	</div>
</template>

<script>
import { quotationId, manufactorList, quotationIdPost, quotationGetService,
	serviceDelete, quotationPdf, quotationPdfGet} from '@/api/user'
import addService from "./model/addService";
import moment from "moment";
export default {
	components:{
		addService
	},
	data(){
		return {
			power:[],
			id:'',
			btnShow:1,
			form:{},
			rules:{
				product_name:[
					{max: 36, message: '产品名称不能超过36个字符', trigger: 'blur'},
					{ required: true, message: '请输入产品名称', trigger: 'blur' }
				],
				model:[
					{max: 36, message: 'Model不能超过36个字符', trigger: 'blur'},
					{required: true, message: '请输入Model', trigger: 'blur'}
				]
			},
			customerRules:{
				customer_name:{ required: true, message: '请选择客户', trigger: 'blur' },
				user_name:{ required: true, message: '请输入联系人', trigger: 'blur' },
				mobile: [
					{ required: true, message: '手机号不能为空' },
					{ type: 'number',
						message: '手机号格式不正确',
						trigger: 'blur',
						transform (value) {
							var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
							if (!phonereg.test(value)) {
								return false
							}else{
								return Number(value)
							}
						}
					}
				],
				email: [
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{
						type: 'email',
						message: '请输入正确的邮箱地址'
					},
				],
			},
			laboratoryRules:{
				addr:{ required: true, message: '请输入地址', trigger: 'blur' },
				name:{ required: true, message: '请输入报价人', trigger: 'blur' },
				mobile: [
					{ required: true, message: '手机号不能为空' },
					{ type: 'number',
						message: '手机号格式不正确',
						trigger: 'blur',
						transform (value) {
							var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
							if (!phonereg.test(value)) {
								return false
							}else{
								return Number(value)
							}
						}
					}
				],
				email: [
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{
						type: 'email',
						message: '请输入正确的邮箱地址'
					},
				],
			},
			laboratory:{},
			customer:{
				user_name:'',
				mobile:'',
				customer_name:'',
				email:''
			},
			customer_list:[],
			btnvalid:false,
			bcglXiangXiList:[],
			totalPrice:'',
			Pdflist:[], // 报价单PDF清单
			serverOptions:[    // 提测服务器选项
				{name:'大陆'},
				{name:'新加坡'},
				{name:'美国'},
				{name:'印度'},
				{name:'俄罗斯'},
				{name:'欧洲'}
			],
			dataShow:true  // 禁用签署日期

		}
	},
	created() {
		this.id = this.$route.params.id
		this.initData(this.$route.params.id)
	},
	methods:{
		// 签署方式
		signChange(e){
			if(e == 'before'){
				this.dataShow = false
			}else {
				this.dataShow = true
				this.form.sign_date = ''
			}
		},
		getLeader(data){
			if(data){
				return data['name']
			}
			else {
				return '暂无'
			}
		},
		getTime(data){
			var d = new Date(data);
			var d2 = d.getTime() - 8 * 60 * 60 * 1000
			d = new Date(d2)
			var  resDate = d.getFullYear() + '-' +
				((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
				(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
				(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
				(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
				(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());

			return resDate
		},
		// 生成报价单
		orderPdf(){

			quotationPdf(this.id).then(res => {
				if(res.status == 'success'){
					this.$message.success(res.message)
					this.$nextTick(() => {
						this.quotationPdflist()
					})
				}else {
					this.$message.error(res.message)
				}
			})
		},
		//
		quotationPdflist(){
			quotationPdfGet(this.id).then(res => {
				this.Pdflist = res.data
			})
		},
		addServer(){
			this.$refs.addService.dialogFormVisible = true
			this.$refs.addService.initData(1,this.form,'')
		},
		edit(data){
			this.$refs.addService.dialogFormVisible = true
			this.$refs.addService.initData(2,this.id,data)
		},
		see(data){
			this.$refs.addService.dialogFormVisible = true
			this.$refs.addService.initData(3,this.id,data)
		},
		copy(data){
			this.$refs.addService.dialogFormVisible = true
			this.$refs.addService.initData(4,this.id,data)
		},
		del(data){
			serviceDelete(data.id).then(res => {
				if(res.status == 'success'){
					this.$message.success(res.message)
					this.serviceList(this.id)
					this.initData(this.id)
				}
			})
		},
		getContent(data){
			if(data == 0){
				return '--'
			}else {
				return data
			}
		},


		go(){
			this.$router.go(-1)
		},
		customerChange(data){
			console.log(data,12121)
			if(data != ''){
				this.customer_list.filter(item => {
					if(item.id == data){
						console.log(item)
						this.customer.customer_name = item.name
						this.customer.costomer_id = item.id
					}
				})
			}else {
				this.customer = {}
			}

		},
		editBtn(){
			this.btnShow = 2
			if(this.form.sign_type == 'before'){
				this.dataShow = false
			}
			this.$message.warning('您可以修改数据了，请填写完点击提交！')
		},
		submit(form){
			this.$refs[form].validate((valid) => {
				if(valid){
					this.btnvalid = true
				}else {
					this.btnvalid = false
				}
			})
			this.$refs.laboratory.validate((valid) => {
				if(valid){
					this.btnvalid = true
				}else {
					this.btnvalid = false
				}
			})
			this.$refs.customer.validate((valid) => {
				if(valid){
					this.btnvalid = true
				}else {
					this.btnvalid = false
				}
			})
			this.customer_list.forEach(item => {
				if(item.id == this.customer.costomer_id){
					// this.customer.user_name = item.contacts
					// this.customer.mobile = item.phone
					this.customer.customer_name = item.name
					this.customer.costomer_id = item.id
				}
			})
			var data = {
				customer_json:this.customer,
				laboratory_json:this.laboratory,
				product_name:this.form.product_name,
				model:this.form.model,
				test_type:this.form.test_type,
				servers:this.form.servers,
				sign_type:this.form.sign_type
			}

			if(this.form.sign_type == 'before'){
				data.sign_date = moment(this.form.sign_date).format('YYYY-MM-DD HH:mm:ss')
			}
			console.log(data,121212)
			if(this.btnvalid){
				quotationIdPost(data,this.id).then(res => {
					if(res.status == 'success'){
						this.dialogFormVisible = false
						this.$message.success(res.message)
					}else {
						this.$message.error('修改失败!')
					}
					this.initData(this.id)
					this.btnShow = 1
				})
			}
		},
		//
		serviceList(data){
			quotationGetService(data).then(res => {
				this.bcglXiangXiList = res.data
			})
		},

		initData(data){
			let arr = []
			// 报价单PDF清单
			this.quotationPdflist()
			quotationId(data).then(res => {
				this.form = Object.assign({},res.data)
				// res.data.servers.forEach(item => {
				// 	arr.push({name:item})
				// })
				// this.form.servers = arr
				this.laboratory = Object.assign({},res.data.laboratory_json)
				this.customer = Object.assign({},res.data.customer_json)
				this.customer.customer_name = res.data.customer_json['costomer_id']
				this.totalPrice = res.data.price
			})

			manufactorList().then(res => {
				this.customer_list = res.data
			})

			this.serviceList(data)

			this.power = sessionStorage.getItem('power').split(',')
		}
	}
}
</script>
<style lang="scss" scoped>
.content{
	padding: 0 10px;
	margin-bottom: 50px;
	min-height: 1000px;
}
.banse{
	margin-top: 10px;
}
.del{
	color: #1890FF;
	cursor: pointer;
}
.msg{
	display: flex;
	width: 100%;
	margin: 10px 0;
	.item:first-child{
		width: 49%;
		margin-right: 1%;
	}
	.item:last-child{
		width: 50%;
	}
}
.serveList{
	margin-top: 10px;

	.serveTable{
		height: 513px;
		overflow: scroll;
		margin-bottom: 8px;
	}
}
.topBottom{
	z-index: 999;
	position: fixed;
	bottom: 5px;
	background: #fff;
	width: calc(100% - 210px);
	right: 0;
	height: 50px;
	line-height: 48px;
	margin-bottom: 40px;
	padding-right: 2%;
	text-align: right;
	.item{
		font-size: 16px;
		font-weight: 800;
	}
}
</style>
